import React, {useEffect, useState} from "react";
import {Menu} from "antd";
import http from "../request";

const { SubMenu } = Menu;

const MenuList = (props) => {
    const [menu, setMenu] = useState([])
    useEffect(() => {
        menuGet()
    }, [])
    
    return (
        <Menu theme="dark" mode="inline" selectedKeys={props.menuKeys} style={{ width: 150, minWidth: 150, height: 600, overflowY: 'auto' }}>
            {
                menu.map(menu => {
                    if(menu?.child && menu.child.length > 0){
                        return (
                            <SubMenu key={'city-' + menu.id} title={menu.name}>
                                {
                                    menu.child.map(menu1 => {
                                        return <Menu.Item key={'city-' + menu1.id} onClick={() => menuChange(menu1.id, '', menu1.id, '')}>{menu1.name}</Menu.Item>
                                    })
                                }
                            </SubMenu>
                        )
                    } else {
                        return <Menu.Item key={menu.id} onClick={() => menuChange(menu.id, menu.id, '', '')}>{menu.name}</Menu.Item>
                    }
                })
            }
        </Menu>
    )

    // 城区-列表-树状
    function menuGet(){
        http('city.tree').then(res => {
            if(res.code === 1){
                setMenu(res.data)
            }
        })
    }
    function menuChange(id, city, region, area){
        props.menuChange(id, city, region, area)
    }
}

export default MenuList